<template lang="html">
    <transition name="fade">
    <div id="movie_detail_wrapper" v-if="detailmovie.length!==0">
      <section id="movie_detail">
          <div class="movie-fliter"></div>
          <div class="img_bg" v-if="detailmovie.albumImg" :style="{backgroundImage: `url(${detailmovie.albumImg})`}"></div>
          <div class="img_bg" v-else :style="{backgroundImage: `url(${picFix(detailmovie.img)})`}"></div>
          <div class="movie_content">
              <img :src="picFix(detailmovie.img)" alt="">
              <div class="content-wrapper">
                  <!-- <h1 class="musicName" v-if="detailmovie.musicName">{{detailmovie.musicName}}</h1> -->
                  <h1 class="musicName">{{detailmovie.nm}}</h1>
                  <p class="musicName_engish">{{detailmovie.enm}}</p>
                  <div class="movie_info textOverflow1">
                      <h3>{{detailmovie.bingeWatch}}想看</h3>
                      <div class="icon_text_info">
                          <strong>{{detailmovie.cat}}</strong>
                          <span class="icon" v-if="detailmovie.version =='v3d imax'" :class="{'active1': detailmovie.version =='v3d imax'}"></span>
                          <span v-else class="icon" :class="{'active2': detailmovie.version =='v2d imax'}"></span>
                      </div>
                      <p class="movie_dur">{{detailmovie.src}}/{{detailmovie.dur}}分钟</p>
                      <p class="time">{{detailmovie.pubDesc}}</p>
                  </div>
              </div>
          </div>
      </section>
      <!-- 日期 -->
      <section id="showDays" v-if="showDays.length">
          <div class="timeLine">
             <div v-for="(day, index) in showDays" :key="day.id" class="showday" :class="{isActive:day_index == index}" @click="changeTime(day,index)">{{day}}</div>
          </div>
      </section>
      <!-- 上映地点等信息 -->
      <section id="list-wrap">
          <ul class="list-wrap-list" v-infinite-scroll="loadMore">
              <li class="list-wrap-item" v-for="(movie, index) in movie" :key="index" @click="cinemaDetail(movie.id)" v-if="movie.length !==0">
                <div class="name">
                    <h1 class="nm">{{movie.nm}}</h1>
                    <p><span>{{movie.sellPrice}}</span>元起</p>
                </div>
                <div class="address clearfix">
                    <p class="addr textOverflow1">{{movie.addr}}</p>
                    <span class="distance">{{movie.distance}}</span>
                </div>
                <div class="cardPromotionTag">
                    <span v-if="movie.promotion.cardPromotionTag" class="icon"></span>
                    <span v-if="movie.promotion.cardPromotionTag" class="lijian textOverflow1">{{movie.promotion.cardPromotionTag}}</span>
                </div>
                <div class="showTimes">
                    近期场次：{{movie.showTimes}}
                </div>
              </li>
          </ul>
          <!-- loading 加载组件 -->
          <mt-spinner color="rgb(100, 100, 100)" type="fading-circle" class="loading"></mt-spinner>
      </section>
    </div>
  </transition>
</template>

<script>
import qs from 'qs';
import myCinema from '@/components/myCinema.vue'
export default {
    created(){
      // this.day_m = this.format();
      //判断是否有传进来的参数，如果有就把参数给id，如果没有就从localStorage读参数给id
			if(this.$route.params.movieId!='' ){
				this.movieId=this.$route.params.movieId;
			}else{
				this.movieId=JSON.parse(localStorage.getItem("movieId"))
			}
      // 电影信息详情
      this.axios.get('/ajax/detailmovie',{
          params:{
              movieId:this.movieId
          }
      }).then((res)=>{
          this.detailmovie = res.data.detailMovie;
          // 日期接口
          this.showDays.push(res.data.detailMovie.rt);
          // 修改提交
          this.$store.commit('changeHt', this.detailmovie.nm)
          this.format()
      })
      this.post_move('2018-12-21', 0);
   },
    data() {
        return {
            movieId: '',
            detailmovie:{}, // 电影详情
            movie: [], // 电影上映日期等
            day_m: '',
            offset: 0, // 请求数据数量
            showDays: [],
            cityId: '',
            day_index: 0, // 切换日期索引
        }
    },
    methods: {
        // 设置图片大小
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace('w.h', '110.150')
            }
       },
       post_move(day_m, offset) {
           //影院信息
           this.axios.post('/ajax/movie',qs.stringify({
                 movieId:this.movieId ,
                 day:day_m,
                 offset:offset,
                 limit:20,
                 cityId:20,
                 districtId: -1,
                 lineId: -1,
                 hallType: -1,
                 brandId: -1,
                 serviceId: -1,
                 areaId: -1,
                 stationId: -1,
                 item: "",
                 updateShowDay: true,
                 reqId: 1545374199882
           })
             ).then((res)=>{
                 // 判断请求结果，如果影院为空，就代表当天无上映，需要再次请求。
                 if (res.data.cinemas.length !== 0) {
                     this.movie = this.movie.concat(res.data.cinemas);
                     this.movie = res.data.cinemas;
                 } else {
                     let day = res.data.showDays.dates[0].date;
                     this.post_move(day, 0);
                 }
           })
       },
       // 到底刷新
       loadMore() {
           this.offset += 20;
           this.post_move(this.day_m, this.offset);
       },
       cinemaDetail(cinemaId) {
           this.$router.push({
               name: 'cinemadetail',
               params: {
                   cinemaId: cinemaId,
                   index: this.index
               },
               query: {movieId: this.movieId}
           })
       },
       format() {
           let date = new Date();
           let resentYear = (new Date(this.showDays[0])).getFullYear(); // 年
           let resentMonth= (new Date(this.showDays[0])).getMonth() + 1; // 月
           let resentDay = (new Date(this.showDays[0])).getDate(); // 日
           let nowYear = date.getFullYear(); // 获取当前年
           let nowMonth = date.getMonth() + 1; // 获取当前月
           let nowDay = date.getDate(); // 获取当前日
           let time=new Date(resentYear,resentMonth,0)
		   let days = time.getDate()		//获取当前月的总天数
		   let isover = false	//判断当月天数是否超了
           // 判断电影上映的那天是否为今天
           if(resentYear == nowYear && resentMonth == nowMonth && resentDay == nowDay) {
               if (days - resentDay >= 7) {
                   for (let i = 0; i < 7; i++) {
                    //    let resentTimeLine = (resentYear+'-'+resentMonth+'-'+(resentDay+i))
                       if (i == 1) {
                           this.showDays[0] = "今天" +this.showDays[0];
                           this.showDays.push("明天" + resentYear+'-'+resentMonth+'-'+(resentDay+i))
                       }else if (i == 2) {
                           this.showDays.push("后天" + resentYear+'-'+resentMonth+'-'+(resentDay+i))
                       } else {
                           let week = this.week((new Date(resentYear+'-'+resentMonth+'-'+(resentDay+i))).getDay())
						   this.showDays.push(week+resentYear+'-'+resentMonth+'-'+(resentDay+i))
                       }
                   }
               }else{
					for(var i=1;i<7;i++){
						resentDay++;
						if(resentDay>days && isover==false){
							isover=true;
							resentDay=1;
							resentMonth+=1;
							if(resentMonth>12){
								resentMonth=1;
								resentYear+=1;
							}
						}
						if(i==1){
                            // let resentTimeLine1 = (resentYear+'-'+resentMonth+'-'+resentDay)
							this.showDays[0]="今天 "+this.showDays[0];
							this.showDays.push("明天 "+resentYear+'-'+resentMonth+'-'+resentDay)
						}else if(i==2){
							this.showDays.push("后天 "+resentYear+'-'+resentMonth+'-'+resentDay)
						}else{
							var week=this.week((new Date(resentYear+'-'+resentMonth+'-'+resentDay)).getDay())
							this.showDays.push(week+resentYear+'-'+resentMonth+'-'+resentDay)
						}
					}
				}
           }else if((new Date(this.showDays[0])).getTime()<(new Date().getTime())){
               //电影上映的那天比今天早
					this.showDays.length=0;
					if(days-nowDay>=7){
						for(let i = 1;i<7;i++){
							if(i==1){
								this.showDays.push("今天 "+nowYear+"-"+nowMonth+"-"+(nowDay))
								this.showDays.push("明天 "+nowYear+"-"+nowMonth+"-"+(nowDay+i))
							}else if(i==2){
								this.showDays.push("后天 "+nowYear+"-"+nowMonth+"-"+(nowDay+i))
							}else{
								let week=this.week((new Date(nowYear+"-"+nowMonth+"-"+(nowDay+i))).getDay())
								this.showDays.push(week+nowYear+"-"+nowMonth+"-"+(nowDay+i))
							}
						}
					}else{
						for(let i=1;i<7;i++){
							nowDay++;
							if(nowDay>days && isover==false){
								isover=true;
								nowDay=1;
								nowMonth+=1;
								if(nowMonth>12){
									nowMonth=1;
									nowYear+=1;
								}
							}
							if(i==1){
								this.showDays.push("今天 "+nowYear+"-"+nowMonth+"-"+(nowDay-1))
								this.showDays.push("明天 "+nowYear+"-"+nowMonth+"-"+nowDay)
							}else if(i==2){
								this.showDays.push("后天 "+nowYear+"-"+nowMonth+"-"+nowDay)
							}else{
								let week=this.week((new Date(nowYear+"-"+nowMonth+"-"+nowDay)).getDay())
								this.showDays.push(week+nowYear+"-"+nowMonth+"-"+nowDay)
							}
						}
					}
				} else { //电影上映的那天比今天晚
                    if(days-resentDay>=7){
						for(let i=1;i<7;i++){
							if(i==1){
								this.showDays[0]= this.showDays[0];
							}
							let week=this.week((new Date(resentYear+"-"+resentMonth+"-"+(resentDay+i))).getDay())
							this.showDays.push(week+resentYear+"-"+resentMonth+"-"+(resentDay+i))
						}
					}else{
						for(let i=1;i<7;i++){
							resentDay++;
							if(resentDay>days && isover==false){
								isover=true;
								resentDay=1;
								resentMonth+=1;
								if(resentMonth>12){
									resentMonth=1;
									resentYear+=1;
								}
							}
							if(i==1){
								this.showDays[0] = this.showDays[0];
							}
							let week=this.week((new Date(resentYear+"-"+resentMonth+"-"+resentDay)).getDay())
							this.showDays.push(week+resentYear+"-"+resentMonth+"-"+resentDay)
						}
					}
                }
       },
       // 处理周
       week(week) {
           switch (week) {
                case 0:
                    return '周日';
                    break;
                case 1:
                    return '周一';
                    break;
                case 2:
                    return '周二';
                    break;
                case 3:
                    return '周三';
                    break;
                case 4:
                    return '周四';
                    break;
                case 5:
                    return '周五';
                    break;
                case 6:
                    return '周六'
                    break;
           }
       },
       // 时间切换,渲染其他影院信息
       changeTime(item_day, index) {
           this.day_index = index;
           let day = item_day.split(' ')[1]
           let time=(new Date(day)).getTime();
            this.post_move(day, 0 ,time);
       }
   },
   computed: {
   },
   watch: {
       movieId(newValue) {
           localStorage.setItem('movieId',(JSON.stringify(newValue)))
       }
   },
   component: {}
}
</script>

<style lang="scss" scoped>
@import '@/assets/sass/movie_detail.scss';

.fade-enter-active, .fade-leave-active {
    transition: transform 0.8s;
}
.fade-enter, .fade-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}
.loading {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
}
</style>
